import { DoubleLeftOutlined } from '@ant-design/icons'
import { Button } from 'antd'
import { useStreams } from '@/lib/utils'
import services from '@/services'
import type { ContactWithTransfer } from '@/services/contacts'
import './AccessUnread.module.less'

/**
 * 跳转到新消息的按钮
 */
export function AccessUnread(props: {
  contact: ContactWithTransfer
  visible: boolean
  onClick: () => void
}) {
  const { contact, visible, onClick } = props

  // 当前联系人在 pending 状态下的未读消息数（因为“当前联系人”只有在 pending 状态下才会统计未读消息数）
  const [unreads] = useStreams(services.chat.metas.unreads)
  const unread = unreads.get(contact.id)?.unread ?? 0

  if (visible) {
    if (unread !== 0) {
      return <div styleName="access-unread" onClick={onClick}>
        <DoubleLeftOutlined />
        <span styleName="text">{unread}条新消息</span>
      </div>
    } else {
      return <Button shape="circle" styleName="go-bottom" onClick={onClick}>
        <DoubleLeftOutlined />
      </Button>
    }
  }

  return null
}
